<template>
  <div>
    <!-- <van-row><img class="banner-img" src="/static/images/banner.png"/></van-row> -->
    <van-row>
      <van-grid column-num="3" :border="false" v-for="(item, index) in provinceList" v-if="index % 3 == 0" :key="index">
        <van-grid-item use-slot @click="toSearch(provinceList[index].code)">
          <image style="width: 80px;height: 74px;" :src="'/static/images/province/'+provinceList[index].code+'.jpg'"/>
          <span>{{provinceList[index].name}}</span>
        </van-grid-item>
        <van-grid-item use-slot @click="toSearch(provinceList[index+1].code)" v-if="(index+1) < provinceList.length && provinceList[index+1]">
          <image style="width: 80px;height: 74px;" :src="'/static/images/province/'+provinceList[index+1].code+'.jpg'"/>
          <span>{{provinceList[index+1].name}}</span>
        </van-grid-item>
        <van-grid-item use-slot @click="toSearch(provinceList[index+2].code)" v-if="(index+2) < provinceList.length && provinceList[index+2]">
          <image style="width: 80px;height: 74px;" :src="'/static/images/province/'+provinceList[index+2].code+'.jpg'"/>
          <span>{{provinceList[index+2].name}}</span>
        </van-grid-item>
      </van-grid>
    </van-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      provinceList: []
    }
  },
  mounted () {
    this.findProvinceList()
  },
  methods: {
    toSearch (province) {
      console.log(province)
      wx.navigateTo({ url: '/pages/search/main?province=' + province })
    },
    findProvinceList () {
      this.$fly.get('/open/doublename/provinces').then(res => {
        this.provinceList = res.data
      })
    }
  },
  created () {
    this.name = ''
    this.result = null
  }
}
</script>

<style scoped>
  .banner-img {
    width: 750rpx;
  }
  .main {
    padding: 0.1rem 0.3rem;
  }
  .main .main-row {
    margin-bottom: 20rpx;
  }
  .main .title {
    font-size: 30rpx;
    font-family:'微软雅黑';
    margin-bottom: 20rpx;
  }
  .placeholder {
    margin: 5px;
    padding: 0 10px;
    background-color: #dcdcdc;
    height: 3.0em;
    line-height: 3.0em;
    text-align: center;
  }
  .province-pinyin {
    color: rgba(0,0,0,.3);
  }
</style>
